Hyödynnä React Server Actions -toimintojen teho saumattomaan lomakkeiden käsittelyyn ja palvelinpuolen datamutaatioihin. Opi rakentamaan tehokkaita, turvallisia ja käyttäjäystävällisiä verkkosovelluksia.
React Server Actions: Kattava opas lomakkeiden käsittelyyn ja palvelinintegraatioon
React Server Actions edustavat merkittävää kehitysaskelta siinä, miten rakennamme interaktiivisia verkkosovelluksia Reactilla. Ne mahdollistavat kehittäjille palvelinpuolen koodin suorittamisen suoraan React-komponenteista, mikä tehostaa lomakkeiden käsittelyä, datamutaatioita ja muita palvelimesta riippuvaisia toimintoja. Tämä opas tarjoaa kattavan yleiskatsauksen React Server Actions -toiminnoista, käsitellen niiden hyötyjä, toteutuksen yksityiskohtia ja parhaita käytäntöjä.
Mitä ovat React Server Actions?
Server Actions ovat asynkronisia funktioita, jotka suoritetaan palvelimella. Niitä voidaan kutsua suoraan React-komponenteista, mikä mahdollistaa lomakkeiden lähetysten käsittelyn, datan päivittämisen ja muun palvelinpuolen logiikan suorittamisen ilman erillisten API-päätepisteiden kirjoittamista. Tämä lähestymistapa yksinkertaistaa kehitystä, vähentää asiakaspuolen JavaScriptin määrää ja parantaa sovelluksen suorituskykyä.
Server Actions -toimintojen keskeiset ominaisuudet:
- Palvelinpuolen suoritus: Toiminnot suoritetaan ainoastaan palvelimella, mikä varmistaa datan turvallisuuden ja estää arkaluontoisen logiikan paljastumisen asiakkaalle.
- Suora kutsu React-komponenteista: Voit kutsua Server Actions -toimintoja suoraan komponenteissasi, mikä tekee palvelinpuolen logiikan integroimisesta käyttöliittymään helppoa.
- Asynkroniset operaatiot: Toiminnot ovat asynkronisia, joten voit suorittaa pitkäkestoisia tehtäviä estämättä käyttöliittymää.
- Progressiivinen parantaminen: Server Actions tukevat progressiivista parantamista, mikä tarkoittaa, että sovelluksesi toimii, vaikka JavaScript olisi poissa käytöstä.
React Server Actions -toimintojen käytön hyödyt
Server Actions tarjoavat useita merkittäviä etuja perinteisiin asiakaspuolen datanhaku- ja mutaatiotekniikoihin verrattuna:
Yksinkertaistettu kehitys
Poistamalla tarpeen erillisille API-päätepisteille, Server Actions vähentävät kirjoitettavan boilerplate-koodin määrää. Tämä voi merkittävästi yksinkertaistaa kehitystyönkulkua ja tehdä koodikannasta helpommin ylläpidettävän. Sen sijaan, että rakentaisit ja hallinnoisit API-reittejä, määrittelet toiminnot, jotka sijaitsevat yhdessä niitä käyttävien komponenttien kanssa.
Parannettu suorituskyky
Server Actions voivat parantaa sovelluksen suorituskykyä vähentämällä asiakkaalla ladattavan ja suoritettavan JavaScriptin määrää. Ne mahdollistavat myös datan muunnosten ja validoinnin suorittamisen palvelimella, mikä voi edelleen vähentää asiakkaan kuormitusta. Palvelin voi tehokkaasti hallita datan käsittelyä, mikä johtaa sulavampaan käyttökokemukseen.
Tehostettu tietoturva
Koska Server Actions suoritetaan palvelimella, ne tarjoavat turvallisemman tavan käsitellä arkaluontoista dataa ja operaatioita. Voit suojata datasi luvattomalta käytöltä ja manipuloinnilta suorittamalla validoinnin ja valtuutustarkistukset palvelimella. Tämä lisää tietoturvakerroksen verrattuna asiakaspuolen validointeihin, jotka voidaan kiertää.
Progressiivinen parantaminen
Server Actions on suunniteltu tukemaan progressiivista parantamista. Tämä tarkoittaa, että sovelluksesi toimii, vaikka JavaScript olisi poissa käytöstä tai ei latautuisi. Kun JavaScript ei ole käytettävissä, lomakkeet lähetetään perinteisillä HTML-lomakkeiden lähetyksillä, ja palvelin käsittelee pyynnön vastaavasti. Tämä varmistaa, että sovelluksesi on saavutettavissa laajemmalle käyttäjäkunnalle, mukaan lukien ne, joilla on vanhemmat selaimet tai hitaammat internetyhteydet.
Optimistiset päivitykset
Server Actions integroituvat saumattomasti optimistisiin päivityksiin. Voit välittömästi päivittää käyttöliittymän vastaamaan toiminnon odotettua tulosta, jo ennen kuin palvelin on vahvistanut muutoksen. Tämä voi merkittävästi parantaa sovelluksesi koettua responsiivisuutta ja tarjota sulavamman käyttökokemuksen. Jos palvelinpuolen operaatio epäonnistuu, voit helposti palauttaa käyttöliittymän edelliseen tilaansa.
Kuinka toteuttaa React Server Actions
Server Actions -toimintojen toteuttaminen sisältää toimintofunktion määrittelyn, sen liittämisen komponenttiin ja tuloksen käsittelyn.
Server Action -toiminnon määrittäminen
Server Actions määritellään käyttämällä 'use server' -direktiiviä. Tämä direktiivi kertoo React-kääntäjälle, että funktio tulisi suorittaa palvelimella. Tässä on esimerkki:
// app/actions.js
'use server'
import { cookies } from 'next/headers'
import { revalidatePath } from 'next/cache'
export async function createPost(formData) {
const title = formData.get('title')
const content = formData.get('content')
// Simuloidaan tietokantaan lisäämistä
await new Promise((resolve) => setTimeout(resolve, 1000))
console.log('Postaus luotu:', { title, content })
// Uudelleenvalidoidaan blogi-reitti
revalidatePath('/blog')
return { message: 'Postaus luotu onnistuneesti!' }
}
Tässä esimerkissä:
'use server'-direktiivi osoittaa, ettäcreatePost-funktio tulee suorittaa palvelimella.- Funktio ottaa syötteenä
formData-objektin, joka sisältää lomakkeelta lähetetyn datan. - Funktio poimii
title- jacontent-tiedotformData-objektista. - Se simuloi tietokantaan lisäämistä käyttämällä
setTimeout-funktiota. Oikeassa sovelluksessa korvaisit tämän todellisella tietokantalogiikallasi. revalidatePath-funktio mitätöi välimuistin/blog-reitille, varmistaen, että uusin data näytetään.- Funktio palauttaa objektin, jolla on
message-ominaisuus, jota voidaan käyttää onnistumisviestin näyttämiseen käyttäjälle.
Server Actions -toimintojen käyttö React-komponenteissa
Käyttääksesi Server Action -toimintoa React-komponentissa, voit tuoda toimintofunktion ja antaa sen <form>-elementin action-propille. Tässä on esimerkki:
// app/components/PostForm.js
import { createPost } from '../actions'
'use client'
import { useFormStatus } from 'react-dom'
function SubmitButton() {
const { pending } = useFormStatus()
return (
)
}
export default function PostForm() {
return (
)
}
Tässä esimerkissä:
createPost-toiminto tuodaan../actions-tiedostosta.<form>-elementinaction-propi on asetettucreatePost-funktioon.SubmitButton-komponentti käyttääuseFormStatus-hookia selvittääkseen, onko lomake parhaillaan lähetyksessä. Se poistaa painikkeen käytöstä lähetyksen aikana estääkseen useat lähetykset.
Lomakedatan käsittely
Server Actions vastaanottavat lomakedatan automaattisesti FormData-objektina. Voit käyttää dataa FormData-objektin get-metodilla. Tässä on esimerkki:
// app/actions.js
'use server'
export async function createPost(formData) {
const title = formData.get('title')
const content = formData.get('content')
// ...
}
Tässä esimerkissä title ja content poimitaan formData-objektista get-metodilla.
Palautteen antaminen käyttäjälle
Voit antaa palautetta käyttäjälle palauttamalla arvon Server Action -toiminnosta. Tämä arvo on saatavilla toiminnon käynnistäneessä komponentissa. Voit käyttää tätä arvoa näyttääksesi onnistumis- tai virheilmoituksia käyttäjälle. Tässä on esimerkki:
// app/actions.js
'use server'
export async function createPost(formData) {
// ...
return { message: 'Postaus luotu onnistuneesti!' }
}
// app/components/PostForm.js
'use client'
import { useState } from 'react'
import { createPost } from '../actions'
export default function PostForm() {
const [message, setMessage] = useState(null)
async function handleSubmit(formData) {
const result = await createPost(formData)
setMessage(result.message)
}
return (
{message && {message}
}
)
}
Tässä esimerkissä:
createPost-toiminto palauttaa objektin, jolla onmessage-ominaisuus.PostForm-komponentti käyttääuseState-hookia viestin tallentamiseen.handleSubmit-funktio kutsuucreatePost-toimintoa ja asettaa viestin tilan toiminnon palauttamaan arvoon.- Viesti näytetään käyttäjälle
<p>-elementissä.
Virheidenkäsittely
Server Actions voivat heittää virheitä, jotka Reactin suoritusympäristö ottaa kiinni. Voit käsitellä näitä virheitä komponenteissasi käyttämällä try...catch-lohkoa. Tässä on esimerkki:
// app/actions.js
'use server'
export async function createPost(formData) {
// ...
if (!title || title.length < 5) {
throw new Error('Otsikon on oltava vähintään 5 merkkiä pitkä.')
}
return { message: 'Postaus luotu onnistuneesti!' }
}
// app/components/PostForm.js
'use client'
import { useState } from 'react'
import { createPost } from '../actions'
export default function PostForm() {
const [message, setMessage] = useState(null)
const [error, setError] = useState(null)
async function handleSubmit(formData) {
try {
const result = await createPost(formData)
setMessage(result.message)
setError(null)
} catch (e) {
setError(e.message)
setMessage(null)
}
}
return (
{message && {message}
}
{error && {error}
}
)
}
Tässä esimerkissä:
createPost-toiminto heittää virheen, jos otsikko on alle 5 merkkiä pitkä.PostForm-komponentti käyttäätry...catch-lohkoa napatakseen kaikkicreatePost-toiminnon heittämät virheet.- Jos virhe napataan, virheilmoitus näytetään käyttäjälle punaisella tekstillä varustetussa
<p>-elementissä.
Parhaat käytännöt React Server Actions -toimintojen käyttöön
Varmistaaksesi, että käytät Server Actions -toimintoja tehokkaasti, harkitse seuraavia parhaita käytäntöjä:
Käytä 'use server' -direktiiviä
Lisää aina 'use server' -direktiivi Server Action -tiedostojesi alkuun. Tämä direktiivi kertoo React-kääntäjälle, että tiedoston funktiot tulee suorittaa palvelimella. Tämä on ratkaisevan tärkeää turvallisuuden ja suorituskyvyn kannalta.
Pidä toiminnot pieninä ja kohdennettuina
Jokaisen Server Action -toiminnon tulisi suorittaa yksi, hyvin määritelty tehtävä. Tämä tekee toiminnoistasi helpommin ymmärrettäviä, testattavia ja ylläpidettäviä. Vältä suurten, monoliittisten toimintojen luomista, jotka suorittavat useita toisiinsa liittymättömiä tehtäviä.
Validoi data palvelimella
Validoi data aina palvelimella ennen minkään operaation suorittamista. Tämä suojaa sovellustasi virheelliseltä tai haitalliselta datalta. Käytä asianmukaisia validointitekniikoita, kuten datatyyppien validointia, pituustarkistuksia ja säännöllisiä lausekkeita. Palvelinpuolen validointi on turvallisempaa kuin asiakaspuolen validointi, joka voidaan kiertää.
Käsittele virheet sulavasti
Käsittele virheet aina sulavasti Server Actions -toiminnoissasi. Tämä estää sovelluksesi kaatumisen ja tarjoaa paremman käyttökokemuksen. Käytä try...catch-lohkoja napataksesi mahdolliset poikkeukset ja anna informatiivisia virheilmoituksia käyttäjälle.
Käytä optimistisia päivityksiä
Käytä optimistisia päivityksiä parantaaksesi sovelluksesi koettua responsiivisuutta. Päivitä käyttöliittymä välittömästi vastaamaan toiminnon odotettua tulosta, jo ennen kuin palvelin on vahvistanut muutoksen. Jos palvelinpuolen operaatio epäonnistuu, voit helposti palauttaa käyttöliittymän edelliseen tilaansa.
Harkitse välimuistiin tallentamista
Harkitse Server Actions -toimintojen tulosten tallentamista välimuistiin suorituskyvyn parantamiseksi. Tämä voi olla erityisen hyödyllistä toiminnoille, jotka suorittavat kalliita operaatioita tai joita kutsutaan usein. Käytä asianmukaisia välimuististrategioita, kuten HTTP-välimuistia tai palvelinpuolen välimuistia, vähentääksesi palvelimesi kuormitusta.
Suojaa Server Actions -toimintosi
Toteuta turvatoimia suojataksesi Server Actions -toimintojasi luvattomalta käytöltä ja manipuloinnilta. Käytä tunnistautumista ja valtuutusta varmistaaksesi, että vain valtuutetut käyttäjät voivat suorittaa tiettyjä toimintoja. Suojaudu yleisiltä tietoturvahaavoittuvuuksilta, kuten sivustojen väliseltä komentosarja-ajolta (XSS) ja SQL-injektiolta. Puhdista aina käyttäjän syöte ennen sen käyttöä tietokantakyselyissä tai muissa arkaluontoisissa operaatioissa.
Yleiset käyttökohteet React Server Actions -toiminnoille
Server Actions soveltuvat hyvin moniin eri käyttötapauksiin, mukaan lukien:
Lomakkeiden lähetykset
Lomakkeiden lähetysten käsittely on yksi yleisimmistä käyttökohteista Server Actions -toiminnoille. Voit käyttää niitä lomakedatan käsittelyyn, syötteen validointiin ja datan tallentamiseen tietokantaan. Tämä poistaa tarpeen erillisille API-päätepisteille ja yksinkertaistaa kehitystyönkulkua. Esimerkiksi käyttäjän rekisteröinnin, yhteydenottolomakkeiden tai tuotearvostelujen käsittely.
Datamutaatiot
Server Actions -toimintoja voidaan käyttää datamutaatioiden suorittamiseen, kuten datan luomiseen, päivittämiseen tai poistamiseen tietokannasta. Tämä mahdollistaa sovelluksesi datan päivittämisen vastauksena käyttäjän toimiin. Esimerkkejä ovat käyttäjäprofiilien päivittäminen, kommenttien lisääminen tai postausten poistaminen.
Tunnistautuminen ja valtuutus
Server Actions -toimintoja voidaan käyttää tunnistautumisen ja valtuutuksen käsittelyyn. Voit käyttää niitä käyttäjätunnusten tarkistamiseen, tokenien myöntämiseen ja arkaluontoisten resurssien suojaamiseen. Tämä varmistaa, että vain valtuutetut käyttäjät pääsevät käsiksi tiettyihin sovelluksesi osiin. Esimerkiksi sisään-/uloskirjautumistoimintojen toteuttaminen, käyttäjäroolien hallinta tai pääsyn valtuuttaminen tiettyihin ominaisuuksiin.
Reaaliaikaiset päivitykset
Vaikka Server Actions eivät ole luonnostaan reaaliaikaisia, ne voidaan yhdistää muihin teknologioihin, kuten WebSocketsiin, tarjotakseen reaaliaikaisia päivityksiä sovellukseesi. Voit käyttää Server Actions -toimintoja laukaisemaan tapahtumia, jotka sitten lähetetään yhdistetyille asiakkaille WebSocketsin kautta. Ajattele live-chat-sovelluksia, yhteistyöhön perustuvaa dokumenttien muokkausta tai reaaliaikaisia kojelautoja.
Kansainvälistämisen (i18n) huomioiminen
Kun kehitetään sovelluksia Server Actions -toiminnoilla globaalille yleisölle, kansainvälistäminen (i18n) on ratkaisevan tärkeää. Tässä on joitakin keskeisiä huomioita:
Virheilmoitusten lokalisointi
Varmista, että Server Actions -toimintojen palauttamat virheilmoitukset on lokalisoitu käyttäjän haluamalle kielelle. Tämä tarjoaa paremman käyttökokemuksen ja helpottaa käyttäjien ongelmien ymmärtämistä ja ratkaisemista. Käytä i18n-kirjastoja käännösten hallintaan ja viestien dynaamiseen näyttämiseen käyttäjän lokaalin perusteella.
Päivämäärien ja numeroiden muotoilu
Muotoile päivämäärät ja numerot käyttäjän lokaalin mukaan. Eri lokaaleilla on erilaiset käytännöt päivämäärien, numeroiden ja valuuttojen näyttämiseen. Käytä i18n-kirjastoja muotoillaksesi nämä arvot oikein käyttäjän lokaalin perusteella.
Aikavyöhykkeiden käsittely
Kun käsittelet päivämääriä ja aikoja, ole tietoinen aikavyöhykkeistä. Tallenna päivämäärät ja ajat UTC-muodossa ja muunna ne käyttäjän paikalliseen aikavyöhykkeeseen niitä näytettäessä. Tämä varmistaa, että päivämäärät ja ajat näytetään oikein käyttäjän sijainnista riippumatta. Esimerkiksi tapahtumien aikatauluttaminen tai aikaleimojen näyttäminen.
Valuuttamuunnokset
Jos sovelluksesi käsittelee valuuttoja, tarjoa valuuttamuunnostoiminnallisuus. Anna käyttäjien tarkastella hintoja omassa paikallisessa valuutassaan. Käytä luotettavaa valuuttamuunnos-API:a varmistaaksesi, että vaihtokurssit ovat ajan tasalla. Tämä on erityisen tärkeää verkkokauppasovelluksissa ja rahoituspalveluissa.
Oikealta vasemmalle (RTL) -tuki
Jos sovelluksesi tukee kieliä, jotka kirjoitetaan oikealta vasemmalle (RTL), kuten arabiaa tai hepreaa, varmista, että käyttöliittymäsi on asianmukaisesti peilattu näille kielille. Tämä sisältää asettelun, tekstin suunnan ja kuvakkeiden peilauksen. Käytä CSS:n loogisia ominaisuuksia luodaksesi asetteluita, jotka mukautuvat eri tekstisuuntiin.
Esimerkkejä React Server Actions -toiminnoista globaaleissa sovelluksissa
Tässä on joitakin esimerkkejä siitä, miten React Server Actions -toimintoja voidaan käyttää globaaleissa sovelluksissa:
Verkkokauppa-alusta
- Tuotteen lisääminen ostoskoriin: Server Action -toimintoa voidaan käyttää tuotteen lisäämiseen käyttäjän ostoskoriin. Toiminto voi validoida tuotetunnuksen, tarkistaa varastosaldon ja päivittää ostoskorin tietokantaan.
- Tilauksen käsittely: Server Action -toimintoa voidaan käyttää tilauksen käsittelyyn. Toiminto voi validoida käyttäjän maksutiedot, laskea toimituskulut ja luoda tilauksen tietokantaan.
- Uutiskirjeen tilaaminen: Server Action voi käsitellä uutiskirjeen tilauksia, validoida sähköpostiosoitteita ja lisätä ne tilauslistalle.
Sosiaalisen median alusta
- Kommentin julkaiseminen: Server Action -toimintoa voidaan käyttää kommentin julkaisemiseen postaukseen. Toiminto voi validoida kommentin tekstin, liittää sen postaukseen ja tallentaa sen tietokantaan.
- Postauksen tykkääminen: Server Action -toimintoa voidaan käyttää postauksen tykkäämiseen. Toiminto voi päivittää postauksen tykkäysten määrän ja tallentaa tykkäyksen tietokantaan.
- Käyttäjän seuraaminen: Server Actions voi hallita seurantapyyntöjä, käsitellä käyttäjien estämistä ja päivittää seuraajien määriä.
Matkanvaraussovellus
- Lentojen etsiminen: Server Actions -toimintoja voidaan käyttää lentojen saatavuuden kyselyyn määränpään ja päivämäärien perusteella. Toiminto voi kutsua ulkoisia API-rajapintoja, suodattaa tuloksia ja esittää vaihtoehtoja käyttäjälle.
- Hotellihuoneen varaaminen: Server Actions voi käsitellä hotellivarauksia, vahvistaa huoneiden saatavuuden ja käsitellä maksutietoja.
- Matkakohteiden arvostelu: Server action voi käsitellä käyttäjäarvostelujen ja -arvioiden lisäämistä ja käsittelyä.
React Server Components vs. Server Actions
On tärkeää ymmärtää ero React Server Components -komponenttien ja Server Actions -toimintojen välillä, sillä ne toimivat usein yhdessä, mutta palvelevat eri tarkoituksia:
React Server Components
React Server Components ovat komponentteja, jotka renderöidään palvelimella. Ne mahdollistavat datan hakemisen, logiikan suorittamisen ja käyttöliittymäelementtien renderöinnin palvelimella, mikä voi parantaa suorituskykyä ja vähentää asiakkaalla ladattavan ja suoritettavan JavaScriptin määrää. Server Components on tarkoitettu pääasiassa käyttöliittymän renderöintiin ja alkuperäisen datan hakuun.
Server Actions
Server Actions ovat asynkronisia funktioita, jotka suoritetaan palvelimella vastauksena käyttäjän vuorovaikutuksiin, kuten lomakkeiden lähetyksiin. Ne on tarkoitettu pääasiassa datamutaatioiden käsittelyyn, palvelinpuolen logiikan suorittamiseen ja palautteen antamiseen käyttäjälle. Server Actions -toimintoja kutsutaan asiakaskomponenteista, tyypillisesti vastauksena lomakkeiden lähetyksiin tai muihin käyttäjätapahtumiin.
Keskeiset erot:
- Tarkoitus: Server Components on tarkoitettu käyttöliittymän renderöintiin, kun taas Server Actions on tarkoitettu datamutaatioiden käsittelyyn.
- Suoritus: Server Components renderöidään palvelimella alkuperäisen sivun latauksen aikana, kun taas Server Actions -toimintoja kutsutaan asiakaskomponenteista vastauksena käyttäjän vuorovaikutuksiin.
- Datavirta: Server Components voi hakea dataa suoraan palvelimelta, kun taas Server Actions vastaanottaa dataa asiakkaalta lomakkeiden lähetysten tai muiden käyttäjätapahtumien kautta.
Miten ne toimivat yhdessä:
Server Components -komponentteja ja Server Actions -toimintoja voidaan käyttää yhdessä interaktiivisten verkkosovellusten rakentamiseen. Server Components voi renderöidä alkuperäisen käyttöliittymän ja hakea alkuperäisen datan, kun taas Server Actions voi käsitellä datamutaatioita ja antaa palautetta käyttäjälle. Esimerkiksi Server Component voisi renderöidä lomakkeen, ja Server Action voisi käsitellä lomakkeen lähetyksen ja päivittää datan tietokantaan.
Yhteenveto
React Server Actions tarjoavat tehokkaan ja vaikuttavan tavan käsitellä lomakkeiden käsittelyä, datamutaatioita ja muita palvelinpuolen operaatioita React-sovelluksissasi. Hyödyntämällä Server Actions -toimintoja voit yksinkertaistaa kehitystyönkulkua, parantaa sovelluksen suorituskykyä, tehostaa tietoturvaa ja tarjota paremman käyttökokemuksen. Kun rakennat yhä monimutkaisempia verkkosovelluksia, React Server Actions -toimintojen ymmärtäminen ja hyödyntäminen tulee olemaan olennainen taito nykyaikaisille React-kehittäjille.
Muista noudattaa tässä oppaassa esitettyjä parhaita käytäntöjä varmistaaksesi, että käytät Server Actions -toimintoja tehokkaasti ja turvallisesti. Ottamalla Server Actions -toiminnot käyttöön voit vapauttaa Reactin koko potentiaalin ja rakentaa korkean suorituskyvyn, käyttäjäystävällisiä verkkosovelluksia globaalille yleisölle.